﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chromely</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../Content/css/bootstrap.min.css">
    <script src="../Content/js/jquery.min.js"></script>
    <script src="../Content/js/popper.min.js"></script>
    <script src="../Content/js/bootstrap.min.js"></script>
    <script src="../Content/js/bootbox.all.min.js"></script>
    <script>
        // Original dialogs
        function showAlert() {
            var message = 'Chromely: Build HTML Desktop Apps on .NET/.NET Core using native GUI, HTML5, JavaScript, CSS';
            var newMessage = document.getElementById("id_alert_message").value;
            if (newMessage) {
                message = newMessage;
            }
            alert(message);
        }

        function showConfirm() {
            var message = 'Do you want to continue?';
            var newMessage = document.getElementById("id_confirm_message").value;
            if (newMessage) {
                message = newMessage;
            }
            confirm(message);
        }

        function showPrompt() {
            var message = 'What is Chromely based on?';
            var newMessage = document.getElementById("id_prompt_message").value;
            if (newMessage) {
                message = newMessage;
            }
            prompt(message, "");
        }

        function showPopupDialog() {
            var url = 'https://www.youtube.com/embed/Khn7sDUSEJM';
            var newUrl = document.getElementById("id_popup_url").value;
            if (newUrl) {
                url = newUrl;
            }
            window.open(url);
        }
    </script>
</head>
<body>

 <div class="container-fluid">
     <div class="container justify-content-center">
         <br>
         <br>

         <!-- Item List  -->
         <div class="container">
             <div class="row">

                 <!-- Alert  -->
                 <div class='col-sm-6 col-lg-3 mb-3'>
                     <div class='card h-100'>
                         <div class='row no-gutters'>
                             <div class='col-md-12'>
                                 <div class='card-body'>
                                     <h4 class='card-title text-info'>Alert</h4>
                                     <div class='card-text mt-4'>
                                         <label for="id_popup_url">Message:</label>
                                         <input type="text" id="id_alert_message" class="form-control">
                                         <br>
                                         <p>
                                             alert("Chromely: Build HTML Desktop Apps on .NET/.NET Core using native GUI, HTML5, JavaScript, CSS");
                                         </p>
                                         <br>
                                         <br>
                                         <button type="button" class="btn btn-primary btn-sm" onclick="showAlert()" style="margin: 5px;">Show Alert</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- End Alert  -->

                 <!-- Confirm  -->
                 <div class='col-sm-6 col-lg-3 mb-3'>
                     <div class='card h-100'>
                         <div class='row no-gutters'>
                             <div class='col-md-12'>
                                 <div class='card-body'>
                                     <h4 class='card-title text-info'>Confirm</h4>
                                     <div class='card-text mt-4'>
                                         <label for="id_popup_url">Message:</label>
                                         <input type="text" id="id_confirm_message" class="form-control">
                                         <br>
                                         <p>
                                             Sample:
                                             window.open('https://www.youtube.com/embed/Khn7sDUSEJM');
                                         </p>
                                         <br>
                                         <br>
                                         <button type="button" class="btn btn-primary btn-sm" onclick="showConfirm()" style="margin: 5px;">Show Confirm Dialog</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- End Confirm  -->
                 <!-- Prompt  -->
                 <div class='col-sm-6 col-lg-3 mb-3'>
                     <div class='card h-100'>
                         <div class='row no-gutters'>
                             <div class='col-md-12'>
                                 <div class='card-body'>
                                     <h4 class='card-title text-info'>Prompt</h4>
                                     <div class='card-text mt-4'>
                                         <label for="id_popup_url">Message:</label>
                                         <input type="text" id="id_prompt_message" class="form-control">
                                         <br>
                                         <p>
                                             Sample:
                                             window.open('https://www.youtube.com/embed/Khn7sDUSEJM');
                                         </p>
                                         <br>
                                         <br>
                                         <button type="button" class="btn btn-primary btn-sm" onclick="showPrompt()" style="margin: 5px;">Show Prompt Dialog</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- End Prompt  -->
                 <!-- Popup Dialog  -->
                 <div class='col-sm-6 col-lg-3 mb-3'>
                     <div class='card h-100'>
                         <div class='row no-gutters'>
                             <div class='col-md-12'>
                                 <div class='card-body'>
                                     <h4 class='card-title text-info'>Custom Popup Dialog</h4>
                                     <div class='card-text mt-4'>
                                         <label for="id_popup_url">Url:</label>
                                         <input type="text" id="id_popup_url" class="form-control">
                                         <br>
                                         <p>
                                             Sample:
                                             window.open('https://www.youtube.com/embed/Khn7sDUSEJM');
                                         </p>
                                         <br>
                                         <br>
                                         <button type="button" class="btn btn-primary btn-sm" onclick="showPopupDialog()" style="margin: 5px;">Show Popup Dialog</button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
                 <!-- End Popup Dialog -->

             </div>
         </div>

         <!-- End Item List -->

     </div>
 </div>

</body>
</html>